<template>
  <div class="body">
    <div v-if="data[1]" class="color-legend">
      <div class="legend-item">
        <div class="color-block gray"></div>
        <span>灰色: 禁用</span>
      </div>
      <div class="legend-item">
        <div class="color-block red"></div>
        <span>红色: 占用</span>
      </div>
      <div class="legend-item">
        <div class="color-block green"></div>
        <span>绿色: 启用</span>
      </div>
    </div>
    <el-tabs v-if="data[1]" v-model="activeName" class="custom-tabs" @tab-click="handleClick">
      <el-tab-pane label="一层" name="first">
        <div 
          v-for="(item, index) in data[1]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="二层" name="second">
        <div 
          v-for="(item, index) in data[2]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="三层" name="third">
        <div 
          v-for="(item, index) in data[3]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="四层" name="fourth">
        <div 
          v-for="(item, index) in data[4]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="五层" name="fifth">
        <div 
          v-for="(item, index) in data[5]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="六层" name="sixth">
        <div 
          v-for="(item, index) in data[6]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="七层" name="seventh">
        <div 
          v-for="(item, index) in data[7]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="八层" name="eighth">
        <div 
          v-for="(item, index) in data[8]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="九层" name="ninth">
        <div 
          v-for="(item, index) in data[9]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
      <el-tab-pane label="十层" name="tenth">
        <div 
          v-for="(item, index) in data[10]" 
          :key="index"
          class="item-row"
          :style="{
            marginBottom: [2, 5, 7, 9].includes(Number(index)) ? '50px' : '20px'
          }"
        >
          <el-popover
            placement="right"
            width="200"
            trigger="hover"
            v-for="(item2, index2) in item.slice().reverse()" 
            :key="index2"
            popper-class="custom-popover"
          >
            <div class="popover-content">储位编码: {{ item2.storageCode }}</div>
            <div
              slot="reference"
              :class="[
                'pop-item',
                { 
                  'status-success': item2.takeStatus === 0,
                  'status-warning': item2.takeStatus === 1,
                  'status-lock': item2.lockStatus === 1
                }
              ]"
            ></div>
          </el-popover>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { EventSourcePolyfill } from 'event-source-polyfill'
export default {
  data() {
    return {
      data: [],
      activeName: 'first',
      es: null
    }
  },
  mounted() {
    this.createSSE()
  },
  methods: {
    createSSE() {
      const baseURL = process.env.VUE_APP_BASE_API
      this.es = new EventSourcePolyfill(`${baseURL}api/sse/storageDashboard`)
      this.es.onopen = () => {
        console.log('连接成功')
      }
      this.es.onclose = () => {
        console.log('连接断开')
      }
      this.es.onmessage = (e) => {
        const parsedData = JSON.parse(e.data)
        this.originData = parsedData.data.storage.xPathWithStorageVo
        const originData = parsedData.data.storage.xPathWithStorageVo
        if (originData[1] && typeof originData[1] === 'object' && !Array.isArray(originData[1])) {
          const values = Object.values(originData[1])
          const reversedValues = values.reverse()
          originData[1] = {}
          reversedValues.forEach((value, index) => {
            originData[1][index] = value
          })
        }
        this.data = originData
      }
      this.es.onerror = (err) => {
        this.handleError() 
        console.log(err)
      }
    },
    handleError() {
      if (this.es.readyState === EventSourcePolyfill.CLOSED) {
        this.es.close()
        this.createSSE()
      } else if (this.es.readyState === EventSourcePolyfill.CONNECTING) {
        console.log('正在重连中')
      }
    },
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style scoped lang="less">
.body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .lanes-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .vertical-lane {
      width: 60px; // 巷道宽度
      border-radius: 6px;
      position: relative;
      background: linear-gradient(180deg, #8fc9a3 0%, #b7e4c7 100%); // 浅绿色渐变
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .lane-4 {
      height: calc(4 * 30px + 3 * 20px + 50px)
    }
    .lane-3, .lane-2, .lane-1 {
      height: calc(2 * 30px + 1 * 20px + 50px)
    }
    .lane-name {
      color: #2d6a4f;
      font-weight: bold;
      text-align: center;
      padding: 8px 0;
      font-size: 14px;
      border-bottom: 1px solid rgba(45, 106, 79, 0.2);
    }
  }
}

.custom-tabs {
  width: auto;
  flex: 8;
  :deep(.el-tabs__header) {
    margin-bottom: 30px;
    border-bottom: 1px solid #4e5969;
  }
  :deep(.el-tabs__item) {
    color: #fff !important;
    height: 50px;
    width: 80px;
    line-height: 50px;
    text-align: center;
    &.is-active {
      font-weight: 700;
    }
  }
  :deep(.el-tabs__active-bar) {
    background-color: #909399;
  }
  :deep(.el-tabs__content) {
    padding: 10px;
  }
}

.item-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  align-items: center;
}

.pop-item {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    z-index: 1;
  }
}

.status-success {
  background: linear-gradient(135deg, #52c41a 0%, #7ccc50 100%);
  border: 1px solid rgba(103, 194, 58, 0.3);
  
  &:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(82, 155, 46, 0.3);
    background: linear-gradient(135deg, #4aa919 0%, #66b840 100%);
  }
}

.status-warning {
  background: linear-gradient(135deg, #f56c6c 0%, #f88a8a 100%);
  border: 1px solid rgba(245, 108, 108, 0.3);
  
  &:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
    background: linear-gradient(135deg, #e35757 0%, #e97979 100%);
  }
}

.status-lock {
  background: linear-gradient(135deg, #909399 0%, #b8bbbf 100%);
  border: 1px solid rgba(144, 147, 153, 0.3);
  
  &:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(102, 106, 112, 0.3);
    background: linear-gradient(135deg, #7d8086 0%, #a6a9ad 100%);
  }
}

:deep(.custom-popover) {
  :deep(.el-popover__content) {
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  }
}

.popover-content {
  font-size: 14px;
  color: #303133;
}

.color-legend {
  display: flex;
  gap: 30px;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
}

.color-block {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    z-index: 1;
  }
}

.gray {
  background: linear-gradient(135deg, #909399 0%, #b8bbbf 100%);
}

.red {
  background: linear-gradient(135deg, #f56c6c 0%, #f88a8a 100%);
}

.green {
  background: linear-gradient(135deg, #52c41a 0%, #7ccc50 100%);
}
</style>